Skip to main content

Availabilities Page

Overview​

The availabilites page is a central management page for all provider availabilities. All CRUD operations on availabilities can be carried out.

Availabilities page

Features​

1. Business Location Info​

The header section includes:

  • Back button: navigates user to waitlist dashboard.
  • Business name and address
  • Search Functionality: Search by provider name (Results are sorted in descending order of slot dtaetime)
  • Filtering Options: Filter by All, Active, Completed, or Expired
  • Add availability Action Button: this opens the CustomAvailabilityDrawer which enables the clinic admin to an add availabilities for any provider.

2. Availability Data Table (DataTable Component)​

  • The Availability table displays the availabilities of the provider: Each table row shows the following:
    • Date Time: Formatted via formatDateToUTC.
    • Status: Rendered using StatusChip component.
    • Accepted By: Patient info rendered using TablePatient component.
    • Notifications Sent: count of notification sent out from.
    • Action Column: Includes:
      • View notifications: when clicked, we fetch all notifications sent out for that partitcular availability
      • Edit: when clicked, it opens the CustomAvailabilityDrawer, prefills the availability details and allows for edits.
      • Delete: When triggered, makes a request to remove that availability from the database. This also closes out any open notification for the availability.
    • Clicking a table row opens CustomViewEntityDrawer with the selected provider availability data.

3. Pagination​

The Paginate Component is used to:

  • Set how many availabilites to return per page using the Select options
  • Navigate between pages using the previous and next buttons

SSE (Server-Sent Events)​

The page subscribes to real-time updates via useSSE custom hook, listening to:

  • Availability Events: Triggers availabilityRefetch()